<template>
    <div class="topic">
        <nav>
            <ul>
                <li><a @click="fn()">全部</a></li>
                <li><a @click="select()">分享</a></li>
                <li><a>精华</a></li>
                <li><a>问答</a></li>
                <li><a @click="fn()">招聘</a></li>
            </ul>
        </nav>
        <div class="contentTopic">
            <div class="item" v-for="topic in allTopic.data" :key="topic.allTopic">
                <div class="logo-info">
                    <img :src="topic.author.avatar_url" alt="logo">
                    <div class="see">
                        <span>{{topic.reply_count}}</span>/
                        <span>{{topic.visit_count}}</span>
                    </div>
                </div>
                <div class="content" >
                    <span v-show="topic.good">精华</span>
                    <span v-show="topic.top">置顶</span>
                    <span v-show="topic.tab=='share'">招聘</span>
                    <span v-show="topic.tab=='ask'">问答</span>
                    <span v-show="topic.tab=='job'" >招聘</span>
                    <div class="content-title">
                        <h3>
                            <router-link :to="{path:'detail',query:{id:topic.id}}">{{topic.title}}</router-link>
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var allTopic;
export default {
  data() {
    return {
      allTopic: ""
    };
  },
  created() {
    this.axios.get("https://cnodejs.org/api/v1/topics").then(res => {
      this.allTopic = res.data;
      console.log("dddd" + res.data);
    });
  },
  methods: {
    fn() {
      alert("该用户点击了fn()呀怎么回事");
    }
  }
};
</script>

<style lang="scss" scoped>
$fs: 14px;
$color: #f0f0f0;
fontstyle {
  font-size: 14px;
  color: indianred;
  font-weight: 600;
  padding: 15px 20px;
}
display {
  display: inline-block;
}
.topic {
  nav {
    border-bottom: 1px solid $color;
    ul {
      padding: 0;
      margin: 0;
      li {
        padding: 16px  10px;
        @extend display;
        a {
          @extend fontstyle;
          &:hover {
            border-bottom: 3px solid rgba(8, 79, 233, 0.39);
          }
        }
      }
    }
  }
  .contentTopic {
    .item {
      border-bottom: 1px solid $color;
      padding: 6px;
      position: relative;
      margin-bottom: 10px;
      .logo-info {
        @extend display;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          @extend display;
        }
        .see {
          span {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-size: $fs;
          }
        }
      }
      .content {
        padding-left: 20px;
        @extend display;
        span {
          font-size: $fs;
          background: tomato;
          color: #fff;
          padding: 3px 4px;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>